import React, { Component } from 'react'
import Header from './components/Header/Header'
import List from './components/List/List'
import Footer from './components/Footer/Footer'
import './App.css'
export default class App extends Component {
  // 状态提升: 把多个组件要用的数据,写在他们公共的父组件上面
  state = {
    todos: JSON.parse(localStorage.getItem('todos')) || [],
    id: undefined, // 将id,传递给所有Item组件实例.如果app中id的值和某个Item实例的id相同,则当前Item实例要展示文本框
  }

  // 添加任务
  addTodo = (todoName) => {
    // console.log(todoName);

    const todo = {
      id: Date.now(),
      todoName,
      isDone: false,
    }
    // 不建议直接修改数据,原因后面性能优化再讲
    // this.state.todos.push(todo)
    //建议根据旧数据,创建新数据,然后修改新数据
    const newTodos = [...this.state.todos]
    newTodos.push(todo)
    this.setState({
      todos: newTodos,
    })
  }

  // 修改任务
  updateTodo = (id) => {
    // 判断数组,遍历过程中,找到要修改的数据,对数据的isDone进行取反.返回一个新数组
    const newTodos = this.state.todos.map((item) => {
      if (item.id === id) item.isDone = !item.isDone
      return item
    })
    this.setState({
      todos: newTodos,
    })
  }

  // 删除一条任务
  delTodo = (id) => {
    const newTodos = this.state.todos.filter((item) => item.id !== id)
    this.setState({
      todos: newTodos,
    })
  }

  // 全选按钮的逻辑
  allCheckTodos = (target) => {
    const newTodos = this.state.todos.map((item) => {
      item.isDone = target
      return item
    })
    this.setState({
      todos: newTodos,
    })
  }

  // 清除所有完成项
  clearAllDone = () => {
    const newTodos = this.state.todos.filter((item) => {
      return !item.isDone
    })
    this.setState({
      todos: newTodos,
    })
  }

  // 修改app中记录的id,决定哪个Item要展示编辑的文本框
  updateEditId = (id) => {
    this.setState({
      id,
    })
  }

  // 修改任务名
  editTodoName = (todoName) => {
    // console.log(todoName)
    const newTodos = this.state.todos.map((item) => {
      if (item.id === this.state.id) item.todoName = todoName
      return item
    })
    this.setState({
      todos: newTodos,
      id: undefined,
    })
  }
  render() {
    const { todos, id } = this.state
    localStorage.setItem('todos', JSON.stringify(todos))
    return (
      <div className="todo-container">
        <div className="todo-wrap">
          <Header addTodo={this.addTodo}></Header>
          {todos.length ? (
            <div>
              <List
                todos={todos}
                updateTodo={this.updateTodo}
                delTodo={this.delTodo}
                id={id}
                updateEditId={this.updateEditId}
                editTodoName={this.editTodoName}
              ></List>
              <Footer
                todos={todos}
                allCheckTodos={this.allCheckTodos}
                clearAllDone={this.clearAllDone}
              ></Footer>
            </div>
          ) : (
            <h1>恭喜您,暂无任务!</h1>
          )}
        </div>
      </div>
    )
  }
}
